<!--
 * @Description: 泵送剂模板
 * @Autor: yjx
 * @Date: 2021-11-17 16:31:54
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-30 14:19:57
-->
<template>
    <div id="template7" class="template_table_parent">
        <table class="template_table" border="1" cellpadding="0" cellspacing="0" @click="example">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td>检测编号：</td>
                <td class="bg5"></td>
            </tr>
            <tr>
                <td>委托单位</td>
                <td class="bg5" colspan="2"></td>
                <td>品 种</td>
                <td class="bg5"></td>
                <td>出厂编号</td>
                <td class="bg6"></td>
                <td>取样日期</td>
                <td class="bg3 select_date">
                    <el-date-picker
                        v-model="tableData.qysj"
                        format="HH:mm"
                        value-format="timestamp"
                        type="datetime">
                    </el-date-picker>
                </td>
            </tr>
            <tr>
                <td>检测单位</td>
                <td class="bg5" colspan="2"></td>
                <td>等 级</td>
                <td class="bg5"></td>
                <td>车牌号</td>
                <td class="bg6"></td>
                <td>试验日期</td>
                <td class="bg3 select_date">
                    <el-date-picker
                        v-model="tableData.syDate"
                        format="HH:mm"
                        value-format="timestamp"
                        type="datetime">
                    </el-date-picker>
                </td>
            </tr>
            <tr>
                <td>生产厂家</td>
                <td class="bg5" colspan="2"></td>
                <td>品 牌</td>
                <td class="bg5"></td>
                <td>环境温度</td>
                <td class="bg6"></td>
                <td>代表批量</td>
                <td class="bg5"></td>
            </tr>
            <tr>
                <td>送货单位</td>
                <td class="bg5" colspan="2"></td>
                <td>样品来源</td>
                <td class="bg5"></td>
                <td>环境湿度</td>
                <td class="bg6"></td>
                <td>检测依据</td>
                <td class="bg4"></td>
            </tr>
            <tr>
                <td>进场验收项目</td>
                <td>PH值</td>
                <td class="bg5 red" attrName="kjPHz" setType="input">{{tableData.kjPHz && tableData.kjPHz.hgbz && tableData.kjPHz.hgbz.label || '待配置'}}</td>
                <td>密度（g/cm³）</td>
                <td class="bg5 red" attrName="kjmd" setType="input">{{tableData.kjmd && tableData.kjmd.hgbz && tableData.kjmd.hgbz.label || '待配置'}}</td>
                <td>初始净浆流动度（mm）</td>
                <td class="bg5 red" attrName="kjcsjjldd" setType="input">{{tableData.kjcsjjldd && tableData.kjcsjjldd.hgbz && tableData.kjcsjjldd.hgbz.label || '待配置'}}</td>
                <td>1h后净浆流动度</td>
                <td class="bg5 red" attrName="kjonejjldd" setType="input">{{tableData.kjonejjldd && tableData.kjonejjldd.hgbz && tableData.kjonejjldd.hgbz.label || '待配置'}}</td>
            </tr>
            <tr>
                <td>混凝土加水时间</td>
                <td class="bg3 select_date" colspan="8"></td>
            </tr>
            <tr>
                <td>试验期龄</td>
                <td colspan="4">7天</td>
                <td colspan="4">28天</td>
            </tr>
            <tr>
                <td>强度项目</td>
                <td colspan="2">强度</td>
                <td colspan="2">强度平均值</td>
                <td colspan="2">强度</td>
                <td colspan="2">强度平均值</td>
            </tr>
            <tr>
                <td rowspan="3">抗压（Mpa）</td>
                <td class="bg3" colspan="2"></td>
                <td colspan="2" rowspan="3"></td>
                <td class="bg3" colspan="2"></td>
                <td colspan="2" rowspan="3"></td>
            </tr>
            <tr>
                <td class="bg3" colspan="2"></td>
                <td class="bg3" colspan="2"></td>
            </tr>
            <tr>
                <td class="bg3" colspan="2"></td>
                <td class="bg3" colspan="2"></td>
            </tr>
            <tr>
                <td>基准混凝土</td>
                <td>7天强度（Mpa）</td>
                <td class="bg3"></td>
                <td colspan="2">28天强度（Mpa）</td>
                <td class="bg3"></td>
                <td>初始净浆流动度</td>
                <td class="bg2" colspan="2" attrName="csjjldd" setType="input">{{tableData.csjjldd && tableData.csjjldd.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td rowspan="5">检测结果</td>
                <td>7天抗压强度比（%）</td>
                <td class="bg1" attrName="kyqd7" setType="input">{{tableData.kyqd7 && tableData.kyqd7.hgbz || '待配置'}}</td>
                <td colspan="2">28天抗压强度比（%）</td>
                <td class="bg1" attrName="kyqd28" setType="input">{{tableData.kyqd28 && tableData.kyqd28.hgbz || '待配置'}}</td>
                <td>1h后净浆流动度</td>
                <td class="bg2" colspan="2" attrName="onejjldd" setType="input">{{tableData.onejjldd && tableData.onejjldd.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td>密度（g/cm³）</td>
                <td class="bg2" attrName="md" setType="input">{{tableData.md && tableData.md.hgbz || '待配置'}}</td>
                <td colspan="2">PH值</td>
                <td class="bg2" attrName="PHz" setType="input">{{tableData.PHz && tableData.PHz.hgbz || '待配置'}}</td>
                <td>2h后净浆流动度</td>
                <td class="bg2" colspan="2" attrName="twojjldd" setType="input">{{tableData.twojjldd && tableData.twojjldd.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td>初凝时间（min）</td>
                <td class="bg2" attrName="cnsj" setType="input">{{tableData.cnsj && tableData.cnsj.hgbz || '待配置'}}</td>
                <td colspan="2">固含量（%）</td>
                <td class="bg2" attrName="ghl" setType="input">{{tableData.ghl && tableData.ghl.hgbz || '待配置'}}</td>
                <td>1h经时损失（mm）</td>
                <td class="bg2" colspan="2" attrName="onejsss" setType="input">{{tableData.onejsss && tableData.onejsss.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td>终凝时间（min）</td>
                <td class="bg2" attrName="znsj" setType="input">{{tableData.znsj && tableData.znsj.hgbz || '待配置'}}</td>
                <td colspan="2">28天收缩率比（%）</td>
                <td class="bg2" attrName="sslb28" setType="input">{{tableData.sslb28 && tableData.sslb28.hgbz || '待配置'}}</td>
                <td>含气量（%）</td>
                <td class="bg2" colspan="2" attrName="hql" setType="input">{{tableData.hql && tableData.hql.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td>胶砂减水率（%）</td>
                <td class="bg2" attrName="jsjsl" setType="input">{{tableData.jsjsl && tableData.jsjsl.hgbz || '待配置'}}</td>
                <td colspan="2">混凝土减水率（%）</td>
                <td class="bg2" attrName="hntjsl" setType="input">{{tableData.hntjsl && tableData.hntjsl.hgbz || '待配置'}}</td>
                <td>泌水率比（%）</td>
                <td class="bg2" colspan="2" attrName="mslb" setType="input">{{tableData.mslb && tableData.mslb.hgbz || '待配置'}}</td>
            </tr>
            <tr>
                <td rowspan="2">备 注</td>
                <td rowspan="2" colspan="8"></td>
            </tr>
            <tr></tr>
            <tr>
                <td></td>
                <td>审核：</td>
                <td class="bg5" colspan="2"></td>
                <td></td>
                <td>试验：</td>
                <td class="bg5" colspan="2"></td>
                <td></td>
            </tr>
        </table>

        <SetStandardDialog :visible.sync="setStandardVisible" :config="setStandardConfig" @updated="setData"/>
    </div>
</template>
<script>
import SetStandardDialog from './SetStandardDialog'

const ARR = [
    { key: 'kjPHz', title: 'PH值', category: 7, type: 2, code: 'cell_17'},
    { key: 'kjmd', title: '密度', category: 7, type: 2, code: 'cell_18'},
    { key: 'kjcsjjldd', title: '初始净浆流动度', category: 7, type: 2, code: 'cell_19'},
    { key: 'kjonejjldd', title: '1h后净浆流动度', category: 7, type: 2, code: 'cell_20'},
    { key: 'csjjldd', title: '初始净浆流动度', category: 2, type: 2, code: 'cell_37'},
    { key: 'onejjldd', title: '1h后净浆流动度', category: 2, type: 2, code: 'cell_40'},
    { key: 'twojjldd', title: '2h后净浆流动度', category: 2, type: 2, code: 'cell_43'},
    { key: 'kyqd7', title: '7天抗压强度比', category: 1, type: 2, code: 'cell_35'},
    { key: 'kyqd28', title: '28天抗压强度比', category: 1, type: 2, code: 'cell_36'},
    { key: 'md', title: '密度', category: 2, type: 2, code: 'cell_38'},
    { key: 'PHz', title: 'PH值', category: 2, type: 2, code: 'cell_39'},
    { key: 'cnsj', title: '初凝时间', category: 2, type: 2, code: 'cell_41'},
    { key: 'znsj', title: '终凝时间', category: 2, type: 2, code: 'cell_44'},
    { key: 'jsjsl', title: '胶砂减水率', category: 2, type: 2, code: 'cell_47'},
    { key: 'jsjsl', title: '固含量', category: 2, type: 2, code: 'cell_42'},
    { key: 'sslb28', title: '28天收缩率比', category: 2, type: 2, code: 'cell_45'},
    { key: 'hntjsl', title: '混凝土减水率', category: 2, type: 2, code: 'cell_48'},
    { key: 'onejsss', title: '1h经时损失', category: 2, type: 2, code: 'cell_43'},
    { key: 'hql', title: '含气量', category: 2, type: 2, code: 'cell_46'},
    { key: 'mslb', title: '泌水率比', category: 2, type: 2, code: 'cell_49'},
]

export default {
    components: {
        SetStandardDialog, // 设置标准
    },
    props: {
        templateData: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            setStandardConfig: {},
            setStandardVisible: false,
            tableData: {},
        }
    },
    created() {
        const obj = {};
        for(let i = 0; i < ARR.length; i++) {
            obj[ARR[i].key] = {}
        }
        this.tableData = obj
        if(this.templateData) {
            this.tableData = this.templateData
        }
    },
    watch: {
        templateData: {
            deep: true,
            handler: function() {
                if(this.templateData) {
                    this.tableData = this.templateData
                } else {
                    const obj = {};
                    for(let i = 0; i < ARR.length; i++) {
                        obj[ARR[i].key] = {}
                    }
                    this.tableData = obj
                }
            },
        },
    },
    methods: {
        // 格式化数据
        fData(data) {
            if(data && data['hgbz']) {
                let type = null;
                if(Array.isArray(data['hgbz'])) type = 'input'
                if(!Array.isArray(data['hgbz'])) type = 'select'
                if(typeof data['hgbz'] === 'string') type = 'popup'
                if(type === 'input') {
                    const arr = ['合格标准', '相邻波动', '异常标准1', '异常标准2'];
                    return JSON.stringify(Object.values(data).map((item, i)=>({code: i + 1, iteam: arr[i+1], min: item[0], max: item[1], format: i === 0 ? 1 : 2})))
                } else if(type === 'select') {
                    return JSON.stringify({id: data.hgbz.value, value: data.hgbz.label})
                } else if(type === 'popup'){
                    return data.hgbz
                } else {
                    return ''
                }
            } else {
                return ''
            }
            
        },
        example(e) {
            // 事件委托，根据属性判断是否可以点击
            const target = e.target
            const key = target.getAttribute('attrName')
            const type = target.getAttribute('setType')
            if (key && type) {
                this.setStandard(key, type)
            }
        },
        setStandard(key, type) {
            // 设置标准
            // key 要设置的属性名
            // type 类型 input输入框 select下拉框
            if (type === 'input' || type === 'select') {
                this.setStandardConfig = {
                    key,
                    type,
                    data: this.tableData[key],
                }
                if(type === 'select') {
                    this.setStandardConfig.options = ARR.filter(item=>item.key === key)[0].options
                }
                this.setStandardVisible = true
            }
        },
        setData(data) {
            // 自定义事件的回调，设置表格属性
            if (!data.type) return
            this.tableData[data.key] = data.data;

        },
        getData() {
            for(let i = 0; i < ARR.length; i++) {
                if(!this.tableData[ARR[i].key].hgbz) {
                    this.$message.info('请配置' + ARR[i].title);
                    return false;
                }
            }
            const data = {};
            for (let i = 0; i < ARR.length; i++) {
                data[ARR[i].code] = {
                    title: ARR[i].title,
                    category: ARR[i].category,
                    type: ARR[i].type,
                    condition: this.fData(this.tableData[ARR[i].key]),
                    options: ARR[i].options ? JSON.stringify(ARR[i].options.map(item=>({id: item.value, value: item.label}))) : '',
                    resultValue: ''
                }
            }
            // 暴露自身表格数据的方法，父组件通过$refs调用
            return { data, tableData: this.tableData }
        },
    },
}
</script>
<style lang="scss" scoped>
#template1 {
    width: 1200px;
}
$td_width: 100px;
$td_height: 36px;
.params_template {
    width: 100%;
    margin-top: 20px;
    .top {
        display: flex;
        margin-left: 20px;
        .params_type {
            flex: 1;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .item {
                width: 33%;
                margin-bottom: 16px;
                display: flex;
                .item_color {
                    width: 28px;
                    height: 22px;
                    margin-right: 10px;
                }
                .item_text {
                    font-weight: 400;
                }
            }
        }
        .btn {
            width: 350px;
        }
    }
    .template_content {
        width: 100%;
        height: 430px;
        overflow: auto;
    }
    .text {
        width: 100%;
        height: 500px;
        color: #ccc;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .template_table_parent {
        margin: 0 30px 20px 20px;
        table {
            border-collapse: collapse;
            border: 0 !important;
        }
        td {
            position: relative;
        }
        table,th,td{
            border: 1px solid black;
        }
        .el-date-table {
            table,th,td{
                border: 0;
            }
        }
        .bg1 { // 必检
            background: #ffff00;
            color: red;
            cursor: pointer;
        }
        .bg2 { // 选检
            background: #ffffcd;
            color: red;
            cursor: pointer;
        }
        .bg3 { // 必填
            background: #00b14b;
        }
        .bg4 { // 默认
            background: #8062a4;
        }
        .bg5 { // 系统带入
            background: #fdd5b2;
        }
        .bg6 { // 选填
            background: #90d246;
        }
        .text_color { // 业务数据及系统带入值默认颜色
            color: #777;
        }
        .red { // 配置项颜色
            color: red;
            cursor: pointer;
        }
        .template_table {
            .el-select__caret { // 下拉框的下拉箭头
                display: none;
            }
            .el-textarea__inner { // 文本域设置
                width: 100%;
                height: 100%;
                line-height: 36px;
                border: 0;
                outline: none;
                resize: none;
            }
            .el-input {
                width: 100%;
                text-align: center;
            }
            .el-input__inner {
                width: 100%;
                border: 0;
                border-radius: 0;
                background: transparent;
                color: #000;
                text-align: center;
            }
            .el-input__suffix {
                color: #000
            }
            input::-webkit-input-placeholder{
                color: #000;
            }
            .select_date {
                .el-input__inner {
                    width: 100%;
                    border: 0;
                    border-radius: 0;
                    background: transparent;
                    color: #000;
                    padding: 0 10px;
                    text-align: center;
                }
                .el-input__prefix {
                    display: none;
                }
            }
            tr:first-child, tr:last-child{
                td {
                    border: 0;
                }
            }
            td {
                width: $td_width;
                height: $td_height;
                text-align: center;
            }
        }
    }
    
}
</style>